<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.min.js" ></script>
		<style>
			.red{
			color:red; 
			}
			.thin{
				font-weight:200;
			}
			.italic{
				font-style:italic; //斜体
			}
			.active{
				letter-spacing:0.5em; //间距
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!--class方式书写-->
			<h1 class="red thin">这是一个很大很大的H1，大到你无法想象</h1>
			
			<h1 :class="['thin','italic']">第一种方式:直接传递一个数组，注意：这里的class需要使用v-bind做数组绑定</h1>
		
			<h1 :class="['thin','italic',flag?'active':'']">第二种:数组中使用三元表达式</h1>
			
			<h1 :class="['thin','italic',{'active':flag}]">第三种:数组中使用对象替代三元表达式，提高代码的可读性</h1>
		
		<hr/>
			<h1 :class="{red:true,thin:true}">第四种:在wiclass使用v-bind绑定对象时，对象的属性
				是类名，由于对象的属性可以带引号，也可以不带引号,所有这里没写引号，属性的值是一个标识符
			</h1>
		<hr />
			<h1 :class="myclass">
				换一种写法
			</h1>
		</div>
	</body>
	<script>
		var vm=new Vue({
			el:"#app",
			data:{
				flag:true,
				myclass:{red:true,thin:true}
			},
			methods:{
				
			}
		});
	</script>
</html>